import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/extensions/ex_widget.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/ui/draw_under_line.dart';
import 'package:life_service/utils/styles.dart';
import 'package:life_service/utils/svg.dart';

import 'controller.dart';

class HotelPayPage extends GetView<HotelPayController> {
  const HotelPayPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: HexColor(HexColor.colorF2f2),
      appBar: AppBar(
        backgroundColor: Colors.white,
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        leadingWidth: 120,
        leading: TextButton(
          onPressed: Get.back,
          child: Text.rich(
            TextSpan(
              children: [
                const WidgetSpan(
                  child: Icon(
                    CupertinoIcons.chevron_back,
                    size: 18,
                    color: Colors.black,
                  ),
                ),
                TextSpan(
                  text: ' 支付订单',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize16,
                    color: HexColor.color3333,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: (Get.width - 334) / 2),
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    offset: const Offset(0, 2),
                    blurRadius: 10,
                    spreadRadius: 0,
                    blurStyle: BlurStyle.outer,
                    color: HexColor.rgba(204, 204, 204, 0.4),
                  )
                ],
              ),
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 12),
              child: Column(
                children: [
                  Container(
                    height: 32,
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '支付剩余时间：30:00',
                      style: StylesUtils.customTextStyle(
                        color: HexColor.color3333,
                      ),
                    ),
                  ),
                  Container(
                    height: 40,
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '￥668.00',
                      style: StylesUtils.customTextStyle(
                        color: HexColor.colorFf62,
                        fontSize: StylesUtils.fontSize28,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 32,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: '经济双人房（无窗）12月18日',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12,
                                  color: HexColor.color3333,
                                ),
                              ),
                              TextSpan(
                                text: ' 入住',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12,
                                  color: HexColor.color9999,
                                ),
                              ),
                            ],
                          ),
                        ),
                        Text.rich(
                          TextSpan(
                            children: [
                              TextSpan(
                                text: '订单详情 ',
                                style: StylesUtils.customTextStyle(
                                  fontSize: StylesUtils.fontSize12,
                                  color: HexColor.colorFf62,
                                ),
                              ),
                              WidgetSpan(
                                child: Icon(
                                  CupertinoIcons.chevron_right,
                                  size: 10,
                                  color: HexColor(HexColor.color9999),
                                ),
                                alignment: PlaceholderAlignment.middle,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    offset: const Offset(0, 2),
                    blurRadius: 10,
                    spreadRadius: 0,
                    blurStyle: BlurStyle.outer,
                    color: HexColor.rgba(204, 204, 204, 0.4),
                  )
                ],
              ),
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
              child: Column(
                  children: controller.pays
                      .map(
                        (e) => Obx(() {
                          var last = controller.pays.last;
                          return DrawUnderLine(
                            color: last == e
                                ? Colors.transparent
                                : HexColor(HexColor.colorF2f2),
                            child: SizedBox(
                              height: 44,
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text.rich(
                                    TextSpan(
                                      children: [
                                        WidgetSpan(
                                          child: SvgUtils.assetName(
                                              e.value.svgName,
                                              width: 18,
                                              height: 18),
                                          alignment:
                                              PlaceholderAlignment.middle,
                                        ),
                                        TextSpan(
                                          text: ' ${e.value.name}',
                                          style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize12,
                                            color: HexColor.color3333,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  e.value.checed
                                      ? Icon(
                                          CupertinoIcons.checkmark_alt_circle,
                                          size: 20,
                                          color: HexColor(HexColor.colorFf62),
                                        )
                                      : Icon(
                                          CupertinoIcons.circle,
                                          size: 20,
                                          color: HexColor(HexColor.color9999),
                                        ),
                                ],
                              ),
                            ),
                          ).onTap(
                            () {
                              for (var row in controller.pays) {
                                if (row == e) {
                                  e.update((m) => m?.checed = !m.checed);
                                } else {
                                  row.update((m) => m?.checed = false);
                                }
                              }
                            },
                          );
                        }),
                      )
                      .toList()),
            ),
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        bottom: true,
        child: Container(
          height: 70,
          alignment: Alignment.center,
          color: Colors.white,
          child: TextButton(
            onPressed: () {
              Get.toNamed(Routes.hotelSuccess);
            },
            style: ButtonStyle(
              fixedSize: const WidgetStatePropertyAll(Size(335, 40)),
              maximumSize: const WidgetStatePropertyAll(Size(335, 40)),
              backgroundColor:
                  WidgetStatePropertyAll(HexColor(HexColor.colorFf62)),
              foregroundColor: const WidgetStatePropertyAll(Colors.transparent),
              alignment: Alignment.center,
              shape: WidgetStatePropertyAll(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(4),
                ),
              ),
            ),
            child: Text(
              '确认支付 ¥668.00',
              style: StylesUtils.customTextStyle(
                fontWeight: FontWeight.w700,
                fontSize: StylesUtils.fontSize16,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
